<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <div class="tit">
          <h2>{{dataForm.attrId?'编辑微信商户号':'新增微信商户号'}}</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
          <el-row>
            <el-form-item prop="departId" label="公司">
              <el-select v-model="dataForm.departId" clearable>
                <el-option
                  v-for="item in departList"
                  :value="item.departId"
                  :label="item.departName"
                  :key="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="mchId" label="商户号">
              <el-input type="text" v-model="dataForm.mchId" placeholder="请输入商户号"></el-input>
            </el-form-item>
            <el-form-item prop="partnerKey" label="商户号密钥" >
              <el-input type="text" v-model="dataForm.partnerKey" clearable placeholder="请输入商户号密钥"></el-input>
            </el-form-item>

            <el-form-item prop="certNo" label="商户号编号" >
              <el-input type="text" v-model="dataForm.certNo" clearable placeholder="请输入商户号编号"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注">
              <el-input type="textarea" v-model="dataForm.remark"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item>
              <el-button plain type="primary" @click="sureClick">保 存</el-button>
              <el-button plain @click="returnList">取 消</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
  </template>

  <script>
    import * as message from "@/constants/message";
    import MchInfoApi from '@/api/account/mchInfo.js';
    import DepartApi from "@/api/system/depart.js"
    export default {
      data() {
        return {
          dataForm: {
            mchInfoId:"",
            departId: "",
            mchId: "",
            partnerKey: "",
            certNo: "",
            remark: "",
          },
          departList:[],
          roleRules: {
            departId: [
              {required: true, message: "请选择公司", trigger: "change"}
            ],
            mchId: [
              {required: true, message: "请输入商户号", trigger: "focus"}
            ],
            partnerKey:[
              {required:true,message:"请输入商户号密钥",trigger:"focus"}
            ],
            certNo: [
              {required: true, message: "请输入商户号证书编号", trigger: "focus"}
            ]
          }
        }
      },
      components: {
      },
      mounted() {
        this.init()
      },
      methods: {
        init() {
          if (this.$route.query.id) {
            this.dataForm.mchInfoId = this.$route.query.id
            this.getData()
          }
          this.getDepartList()
        },
        keydown(e) {
          if (e.keyCode == 32) {
            e.returnValue = false;
          }
        },
        getData() {
          MchInfoApi.getMchInfo({
            id: this.dataForm.attrId
          }).then(res => {
            this.$Utils.bindingBean(this.dataForm, res.data)
            this.dataForm.requiredFlag = res.data.requiredFlag
            this.dataForm.multiFlag = res.data.multiFlag
          })
        },
        getDepartList(){
          DepartApi.listDepart().then(res=>{
           this.departList = res.data
          })
        },
        sureClick() {
          this.$refs.dataForm.validate(valid => {
            if (valid) {
              this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                .then(() => {
                  if (this.dataForm.attrId) {
                    this.editData();
                  } else {
                    this.addData();
                  }
                });
            }
          })
        },
        addData() {
          let param = {
            departId: this.dataForm.departId,
            mchId: this.dataForm.mchId,
            partnerKey: this.dataForm.partnerKey,
            certNo: this.dataForm.certNo,
            remark: this.dataForm.remark
          };

          MchInfoApi.addMchInfo(param).then(res => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
        },
        editData() {
          let param = {
            mchInfoId:this.dataForm.mchInfoId,
            departId:this.dataForm.departId,
            mchId: this.dataForm.mchId,
            partnerKey: this.dataForm.partnerKey,
            certNo: this.dataForm.certNo,
            remark: this.dataForm.remark
          };
          MchInfoApi.editMchInfo(param)
            .then(data => {
              this.$Utils.notifySuccess()
              this.returnList();
            })
        },
        returnList() {
          this.$store.dispatch('delView', this.$route);
          this.$router.push({path: '/account/MchInfoManagement'});
        }
      },

    }
  </script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

  <style lang="scss" scoped>
    .upload-img {
      &::v-deep .el-upload-dragger {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .tip {
          padding-bottom: 30px;
        }
      }
    }
  </style>

